<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 基本的表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>
<!--展示页面-->
<table class="table">
    <form action="{:url('./list')}" method="get">
<!--        搜索功能-->
        <input type="text" name="keyword">
        <input type="submit" value="搜索">
    </form>
<!--    继续添加-->
    <a href="{:url('./addFrom')}"><button>继续添加</button></a>
<!--    批量删除-->
    <button id="delAll">批量删除</button>
<!--    excel表导出-->
    <a href="{:url('./get')}"><button>导出</button></a>
    <thead>
    <tr>
        <th><input type="checkbox"></th>
        <th>id</th>
        <th>组名</th>
        <th>添加时间</th>
        <th>更新时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {volist name='list' id='user'}
    <tr>
        <td><input type="checkbox" class="dels" id="{$user.id}" name="{$user.id}"></td>
        <td>{$user.id}</td>
        <td>{$user.name}</td>
        <td>{$user.time}</td>
        <td>{$user.time}</td>
        <td>{$user.state}</td>
        <td>
            <a href="{:url('./findUse',['id'=>$user.id])}"><bbutton>修改</bbutton></a>
            <a href="{:url('./delUse',['id'=>$user.id])}"><bbutton>删除</bbutton></a>
        </td>
    </tr>
    {/volist}
    </tbody>
</table>
{$list|raw}
</body>
</html>
<script>
    $('#delAll').click(function (){
        var ids = []
        $('.dels:checked').each(function (){
            // console.log($('.dels:checked').attr('name'))
            ids.push($('.dels:checked').attr('id'))
        })
        console.log(ids)
        $.ajax({
            url:"delAll",
            data:{id:ids},
            success:function (e){
                console.log(e)
                if (e.code==200)
                {
                    $('.del:checked').parents('tr').remove()
                }
            }
        })
    })
</script>